@use "@/styles/usenamespace.scss" as ns;
@use "@/styles/mixin.scss" as mixin;
@use "@/styles/function.scss" as fun;

@include ns.b(popup) using ($b) {
  & > .l-popup {
    $gap: 48rpx;
    background: transparent;
    width: calc(100% - $gap * 2);
  }
  @include ns.e(content) using ($e) {
    $cb: button;
    @include ns.cb($cb) using ($cb) {
      #{fun.getCssVarName($cb, borderColor)}: #{fun.getCssVarValue(primary-strokeColor)};
      #{fun.getCssVarName($cb, borderWidth)}: 2rpx;
      border-radius: 16rpx;
      padding: 32rpx;
      display: block;
    }
    @include ns.nb($cb) using ($nb) {
      @include ns.e(shadow) using ($e) {
        --shadow-position: inset;
        --shadow-y: -12rpx;
        --shadow-color: #{fun.getCssVarValue(primary-strokeColor)};
        opacity: 0.3;
      }

      @include ns.e(content) using ($e) {
        border-radius: inherit;
        padding: #{fun.getCssVarValue($nb, borderWidth)};
      }
    }
  }

  @include ns.e(header) using ($e) {
    position: relative;
    border-radius: inherit;
    @include ns.b($b) using ($b) {
      @include ns.e(title) using ($e) {
        font-size: 36rpx;
        line-height: 50rpx;
        font-weight: bold;
        text-align: center;
        padding-top: 16rpx;
      }
      @include ns.e(close) using ($e) {
        position: absolute;
        top: 0;
        right: 0;

        & > image {
          width: calc(37 * 2rpx);
        }
      }
    }
  }

  @include ns.e(footer) using ($e) {
    $gap: 100rpx;
    display: flex;
    align-items: center;

    @include ns.nb(button) using ($nb) {
      margin-bottom: 16rpx;
      flex: auto;
      margin-right: 32rpx;
    }

    & > :first-child {
      margin-left: $gap;
    }

    & > :last-child {
      margin-right: $gap;
    }
  }

  @each $item in (top, bottom) {
    $direction: map-get(
      $map: (
          top: -1,
          bottom: 1
        ),
      $key: $item
    );

    @include ns.r($item) using ($r) {
      & > .l-popup {
        width: 100%;
      }
      @include ns.b($b) using ($b) {
        @include ns.e(content) using ($e){
          border-#{$item}-left-radius: 0;
          border-#{$item}-right-radius: 0;
          @include ns.nb(button) using ($nb) {
            @include ns.e(border) using ($e) {
              border-#{$item}-width: 0;
              margin-left: calc(fun.getCssVarValue($nb, borderWidth) * -1);
              margin-right: calc(fun.getCssVarValue($nb, borderWidth) * -1);
            }
            @include ns.e(shadow) using ($e) {
              --shadow-y: #{calc($direction * 12rpx)};
            }
          }
        }
      }
    }
  }

  @each $item in (left, right) {
    @include ns.r($item) using ($r) {
      & > .l-popup {
        width: auto;
      }
      @include ns.b($b) using ($b) {
        @include ns.e(content) using ($e){
          border-top-#{$item}-radius: 0;
          border-bottom-#{$item}-radius: 0;
          height: 100%;
          @include ns.nb(button) using ($nb){
            @include ns.e(border) using ($e) {
              border-#{$item}: 0;
            }

            @include ns.e(content) using ($e) {
              display: flex;
              flex-direction: column;
              height: 100%;
            }
          }
        }
        @include ns.e(body) using ($nb){
          flex: auto;
        }
      }
    }
  }
}